<template>
	<div class="category_list">
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>栏目列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 添加按钮 -->
		<el-button 
		type="success" 
		plain 
		style="margin-top: 50px; width: 50%;"
		@click="dialogFormVisible = true"
		>
		添加栏目
		</el-button>
		
		<!-- 主体 -->
		<el-table
		    :data="categoryList"
		    border
		    style="width: 50%">
		    
			<el-table-column
		      prop="id"
		      label="ID"
			  width="200"
		      >
		    </el-table-column>
		    
			<el-table-column
		      prop="name"
		      label="栏目"
		      >
		    </el-table-column>
		  </el-table>
		
		
		<!-- dialog弹窗 -->
		
		<el-dialog title="添加栏目" :visible.sync="dialogFormVisible">
		  <el-form :model="form">
		   
			<el-form-item label="栏目名称:">
		      <el-input v-model="form.name" autocomplete="off"></el-input>
		    </el-form-item>
		  
			<el-form-item class="checkBox">
				<el-checkbox v-model="form.is_top">热门</el-checkbox>
			</el-form-item>
			
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCategory">确 定</el-button>
		  </div>
		</el-dialog>
	
	</div>
</template>

<script>
	import { getCategoryAPI , setCategoryAPI } from '../../apis/category.js'
	export default {
		data (){
			return {
				categoryList: [],
				dialogFormVisible: false,
				
				form: {
					name: '',
					is_top: false,
				}
			}
		},
		
		async created() {
			this.categoryList = (await getCategoryAPI()).data.data;
		},
		
		methods: {
			async addCategory(){
				this.form.is_top ? this.form.is_top = 1 : this.form.is_top = 0;
				const res = await setCategoryAPI(this.form);
				if(res){
					this.$message.success("栏目添加成功！");
					this.dialogFormVisible = false;
					this.form.name = '';
					this.form.is_top = false;
					this.categoryList = (await getCategoryAPI()).data.data;
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.el-table{
		margin-top: 20px;
		
		

		/deep/.is-leaf{
			font-weight: bold;
			color: #434343;
			font-size: 20px;
		}
	}
	
	.el-dialog{
		
		.checkBox{
			text-align: left;
		}
		.dialog-footer{
			display: flex;
			justify-content: center;
			
			.el-button{
				margin: 0 20px;
			}
		}
	}
</style>
